<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <el-row>
          <el-col :span="8" :offset="8">
            <el-form v-model="loginMsg">
              <el-form-item label="账号">
                <el-input v-model="loginMsg.username"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="loginMsg.password" show-password></el-input>
              </el-form-item>
              <template>
                <el-checkbox v-model="checked">记住密码</el-checkbox>
              </template>
              <el-button @click="submit">Login</el-button>
            </el-form>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import {login} from '../../network/Login'
  import router from "../../router";
  import {findUserByAccount} from "../../network/UserInfo";
  export default {
    name: 'Login',
    data() {
      return {
        loginMsg: {
          username: '',
          password: ''
        },
        Msg: '',
        token: '',
        checked: false
      }
    },
    methods: {
      // 提交验证密码
      submit() {
        login(this.loginMsg).then(res => {
          this.Msg = res.data.Msg
          this.token = res.data.token
          if (this.token != undefined) {
            window.sessionStorage.setItem('token', this.token)
            if (this.checked) {
              this.setCookie(this.loginMsg.username, this.loginMsg.password, 10)
            } else {
              this.setCookie("", "", -1)
            }
            this.$router.push('/home')
            this.$message.success('登陆成功')
          }
        })
        findUserByAccount(this.loginMsg.username).then(res => {
          window.sessionStorage.setItem('id', res.data.id)
          window.sessionStorage.setItem('account', res.data.account)
          window.sessionStorage.setItem('mylevel', res.data.mylevel)
          window.sessionStorage.setItem('name', res.data.name)
          window.sessionStorage.setItem('state', res.data.state)
          window.sessionStorage.setItem('userType', res.data.userType)
          window.sessionStorage.setItem('departmentId', res.data.departmentId)
        })
        this.$router.push('/home')
      },
      // 将密码存储到cookie
      setCookie(username, password, existDay) {
        let exDate = new Date(); // 获取目前时间
        exDate.setTime(exDate.getTime() + 24 * 60 * 60 * 1000 * existDay); // 保存天数
        window.document.cookie = "userName" + "=" + username + ";path=/;expires=" + exDate.toGMTString();
        window.document.cookie = "userPwd" + "=" + password + ";path=/;expires=" + exDate.toGMTString();
      },
      // 在cookie中获取用户信息
      getCookie() {
        if (document.cookie.length > 0) {
          var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
          for (var i = 0; i < arr.length; i++) {
            var arr2 = arr[i].split('='); //再次切割
            //判断查找相对应的值
            if (arr2[0] == 'userName') {
              this.loginMsg.username = arr2[1]
              console.log('cookieUsername:' +arr2[1]);
              // this.ruleForm.username = arr2[1]; //保存到保存数据的地方
            } else if (arr2[0] == 'userPwd') {
              this.loginMsg.password = arr2[1]
              console.log('cookiePassword:' +arr2[1]);
              // this.ruleForm.password = arr2[1];
              return "found"
            }
          }
        }
      },
      //清除cookie
      clearCookie: function() {
        this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
      }
    },
    created() {
      this.getCookie()
    },
    mounted() {
      if (this.loginMsg.username != "") {
        this.checked = true
      }
    }
  }
</script>

<style scoped>
  .el-header {
    background: #333333;
    text-align: center;
    line-height: 60px;
    min-height: 80px;
  }
</style>
